.h_drawer-enter-active,
.h_drawer-leave-active {
	transition: opacity 0.4s ease;
}

.h_drawer-enter-from,
.h_drawer-leave-to {
	opacity: 0;

	.h_drawer_container {
		transform: translateX(100%);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.h_drawer_mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba($color: #000000, $alpha: 0.4);

	.h_drawer_container {
		background-color: #fff;
		overflow: hidden;
		position: absolute;
		transition: all 0.4s ease;
		right: 0;
		top: 0;
		bottom: 0;

		.h_drawer {
			width: 100%;
			height: 100%;
			position: relative;
			padding-bottom: 30px;
			box-sizing: border-box;

			.h_drawer_header {
				display: flex;
				justify-content: space-between;
				padding: 14px;
				box-shadow: 0 0 1px rgba($color: #000000, $alpha: 0.4) inset;

				.close {
					cursor: pointer;
					width: 16px;
					height: 16px;

					&:hover {
						color: $primaryColor;
					}
				}

				.title {
					font-size: 14px;
				}
			}

			.d_drawer_body {
				overflow: auto;
				box-sizing: border-box;
			}

			.h_drawer_footer {
				padding: 30px 0 0 0;
				display: flex;
				justify-content: center;
				gap: 10px;
			}

			.h_drawer_loading {
				background-color: rgba($color: #fff, $alpha: 0.8);
				position: absolute;
				width: 100%;
				height: 100%;
				right: 0;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.iconfont {
					font-size: 24px;
					color: $primaryColor;
					animation: spin 1s linear infinite;
				}
			}
		}
	}
}